<template>
        <div class="wrapper" id="schoollist">
            <span>高校列表</span>
            <ul class="ul-wrapper" v-for="item of viewdata" :key="item.school_name">
                <li  class="item-li border-topbottom" >
                    <div class="img-wrapper ">
                          <img class="img" :src="item.icon_url">
                          <span class="text">{{item.school_name}}</span>
                          <span class="text badge badge-pill badge-danger">Rank：{{item.order}}</span>
                          <span class="text badge badge-pill badge-primary">{{item.dual_class_name}}</span>
                          <span class="text badge badge-pill badge-warning">{{item.school_title}}</span>
                          <span class="text badge badge-pill badge-light">{{item.belong}}</span>
                          <router-link :to="'/detail/' + item.school_name">
                          <button type="button" class="btn btn-danger btn-sm">查看详情</button>
                          </router-link>
                    </div>
                </li>
            </ul>
            <ul class="pagination">
              <li class="page-item">
              <a class="page-link" href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
              </a>
              </li>
              <li class="page-item" ><a class="page-link" href="#schoollist" @click="say(),getviewdata()">1</a></li>
              <li class="page-item"><a class="page-link" href="#schoollist"  @click="say(),getviewdata()">2</a></li>
              <li class="page-item"><a class="page-link" href="#schoollist"  @click="say(),getviewdata()">3</a></li>
              <li class="page-item" ><a class="page-link" href="#schoollist" @click="say(),getviewdata()">4</a></li>
              <li class="page-item"><a class="page-link" href="#schoollist"  @click="say(),getviewdata()">5</a></li>
              <li class="page-item"><a class="page-link" href="#schoollist"  @click="say(),getviewdata()">6</a></li>
              <li class="page-item"><a class="page-link" href="#schoollist"  @click="say(),getviewdata()">7</a></li>
              <li class="page-item">
              <a class="page-link" href="#" aria-label="Next" @click="changindexnext()">
                  <span aria-hidden="true">&raquo;</span>
              </a>
              </li>
            </ul>
        </div>
</template>

<script>
export default {
  name: 'CollegeList',
  props: {
    data: Array,
    belong: String,
    type: String,
    specil: String,
    flag: String
  },
  data () {
    return {
      viewdata: [],
      index: Number,
      pagedata: []
    }
  },
  computed: {
    pages () {
      const pages = []
      this.data.forEach((item, index) => {
        const page = Math.floor(index / 20)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  },
  methods: {
    getviewdata () {
      if (this.belong === '全部' && this.type === '全部' && this.specil === '全部') {
        this.pagedata = this.pages
        if (!this.index) {
          this.viewdata = this.pagedata[0]
        } else {
          this.viewdata = this.pagedata[this.index - 1]
        }
      } else if (this.belong !== '全部' && this.type === '全部' && this.specil === '全部') {
        const result = []
        this.data.forEach(e => {
          if (e.province === this.belong) {
            result.push(e)
          }
        })
        this.viewdata = result
      } else if (this.belong === '全部' && this.type !== '全部' && this.specil === '全部') {
        const result = []
        this.data.forEach(e => {
          if (e.school_type === this.type) {
            result.push(e)
          }
        })
        this.viewdata = result
      } else if (this.belong === '全部' && this.type === '全部' && this.specil !== '全部') {
        const result = []
        this.data.forEach(e => {
          if (e.school_title === this.specil || e.dual_class_name === this.specil || e.belong === this.specil) {
            result.push(e)
          }
        })
        this.viewdata = result
      } else if (this.belong !== '全部' && this.type !== '全部' && this.specil === '全部') {
        const result = []
        this.data.forEach(e => {
          if (e.province === this.belong && e.school_type === this.type) {
            result.push(e)
          }
        })
        this.viewdata = result
      } else if (this.belong === '全部' && this.type !== '全部' && this.specil !== '全部') {
        const result = []
        this.data.forEach(e => {
          if ((e.school_title === this.specil || e.dual_class_name === this.specil || e.belong === this.specil) && e.school_type === this.type) {
            result.push(e)
          }
        })
        this.viewdata = result
      } else if (this.belong !== '全部' && this.type === '全部' && this.specil !== '全部') {
        const result = []
        this.data.forEach(e => {
          if (e.province === this.belong && (e.school_title === this.specil || e.dual_class_name === this.specil || e.belong === this.specil)) {
            result.push(e)
          }
        })
        this.viewdata = result
      }
    },
    say () {
      var el = event.currentTarget
      this.index = el.innerHTML
    },
    changindexnext () {
    }
  },
  watch: {
    belong () {
      this.getviewdata()
    },
    type () {
      this.getviewdata()
    },
    specil () {
      this.getviewdata()
    },
    flag () {
      this.getviewdata()
    }
  },
  mounted () {
    this.index = 1
    this.getviewdata()
  }
}
</script>

<style  scoped>
.wrapper{
    margin: 40px;
    width: 61%;
    font-size: 20px;
}
.ul-wrapper{
    margin-top: 12px;
}
.item-li{
    margin-top: 20px;
}
.img-wrapper{
    width:100%;
    height: 70px;
    display: flex;
    align-items: center;
}
.img{
    height: 100%;
}
.text{
    margin-left:30px ;
}
.btn{
    font-size: 17px;
    margin-left:100px ;
    position: absolute;
    left:720px;
    top:10px
}
.pagination{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}
</style>
